<template>
	<view>
		<view class="detail-wrap">
			<view class="content-box">{{title}}</view>
			<view class="other-info">
				<view class="read-num">
					<image src="../../static/img/info_slices/business_college_read.png" mode=""/>
					{{readNum}}
				</view>
				<view class="item-right">
					{{addTime}}
				</view>
			</view>
			
			<view class="detail-info" v-html="content">
			</view>
			<view class="other-info">
				<view class="read-num">
					<image src="../../static/img/info_slices/-business_college_particular_comment.png" mode=""/>
					{{commentNum}}
				</view>
				<view class="mate_tags" @click="thumbs">
					<image v-show="likeNum == false" src="../../static/img/mater/fotter_tags.png" mode=""></image>
					<image v-show="likeNum == true" src="../../static/img/mater/fotter_tags_redx.png" mode=""></image>
					<view :class=" likeNum ? 'likeColler' : ''">{{thumbsNum}}</view>
				</view>
			</view>
		</view>
		<view class="detail_send">
			<view class="comment-wrap">
				<view class="scroll-wrap">
					<view class="comment-num">全部评论({{total}})</view>
					<view class="bor"></view>
					<template v-if="commentList && commentList.length > 0">
						<view class="comment-item margin-bottom-lg" v-for="(item, index) in commentList" :key="index">
							<view class="left-avatar">
								<image class="avatar" :src="item.avatar" mode="widthFix"></image>
								<view class="right-top">
									<view class="title">
										<text>{{ item.userName }}</text>
										<image v-show="item.userLevel == 1" src="../../static/img/me/footer_partner_tally.png" class="picimg"></image>
									</view>
									<view class="time">{{item.time}}</view>
								</view>
							</view>
							<view class="right-box">
								<view class="right-mine">
									<view class="content">{{ item.content }}</view>
									<view class="contenttime">{{item.addTime}}</view>
								</view>
							</view>
						</view>
					</template>
					<view class="no-data">
						<p data-v-2fbdbe34="">~没有更多内容~</p>
					</view>
				</view>
			</view>
			<view class="comment-input">
				<input type="text" v-model="commentVal" class="top-input" placeholder="请输入您想说的内容" />
				<!-- <view class="biaoq" @tap="addImg"></view> -->
				<view class="send-btn" @tap="addCommon"></view>
			</view>
		</view>
	</view>
	
</template>

<script>
	var that;
	export default {
		data() {
			return {
				userId:"",
				detailId: '',
				title:'',
				content:"",
				addTime:'',
				commentVal: '',
				readNum:'',
				commentNum:"",
				likeNum:false,
				detail:'',
				thumbsNum: "",
				imgList:[],
				commentList: [],
				total:"",
			};
		},
		onLoad(options) {
			let that = this;
			if (options && options.id) {
				that.detailId = options.id
				that.materialDetail(that.detailId)
				that.materialcommentList(that.detailId)
			}
			let userinfo = uni.getStorageSync("userInfo")
			console.log(userinfo)
			this.userId = userinfo.id
		},
		
		methods: {
			// 获取详情
			materialDetail(index){
				this.tui.request(
					'/app/material/materialDetail',
					'GET', {
						id: index,
					},
					false,
					false,
					false,
				).then(res => {
					this.title = res.data.titile
					this.content = res.data.content
					this.addTime = res.data.addTime
					this.commentNum = res.data.commentNum
					this.imgList = res.data.imgList
					this.readNum = res.data.readNum
					this.thumbsNum = res.data.thumbsNum
					this.hasVideo = res.data.hasVideo
				}).catch(err => {
					console.log(err)
				})
			},
			//评论列表
			materialcommentList(index){
				this.tui.request(
					'/app/material/materialCommentList',
					'GET', {
						materialId: index,
					},
					false,
					false,
					false,
				).then(res => {
					this.commentList = res.data.list
					this.total = res.data.total
					
				}).catch(err => {
					console.log(err)
				})
			},
			//点赞
			thumbs(){
				this.tui.request(
					'/app/material/thumbs',
					'GET', {
						"id": this.detailId,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.likeNum = true
						this.materialDetail(this.detailId)
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			// 输入评论
			addCommon() {
				this.tui.request(
					'/app/material/commentMaterial',
					'POST', {
						"userId": this.userId,
						"materialId": this.detailId,
						"parentId": "",
						"content": this.commentVal,
					},
					false,
					false,
					false,
				).then(res => {
					console.log(res)
					this.commentVal = ''
					this.materialcommentList(this.detailId);
				}).catch(err => {
					console.log(err)
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	/deep/ img {
		width: 100%;
		height: 100%;
	}
	.no-data {
	    font-size: 24upx;
	    line-height: 40upx;
	    padding: 60upx 0;
	    text-align: center;
	    color: #CCCCCC;
	}
	.detail-wrap {
		background-color: #ffffff;
		padding: 30upx 30upx 0;

		.item-head {
			display: flex;
			align-items: center;
			padding: 20upx 40upx;
			width: 100%;
			justify-content: space-between;
			border-bottom: 1upx solid var(--mainColor);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background-color: #fff;
			height: 120upx;

			.left-info {
				display: flex;
				align-items: center;

				.img-wrap {
					width: 70upx;
					height: 70upx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 20upx;

					.avatar {
						font-size:32upx;
						font-weight:bold;
						color:rgba(51,51,51,1);
						line-height:43upx;
					}
				}

				.head-name {
					padding-left: 40upx;
					color: #666666;
					font-size: 32upx;
				}
			}

			.follow-btn {
				width: 140upx;
				height: 60upx;
				border: 1upx solid var(--mainColor);
				color: var(--mainColor);
				border-radius: 40upx;
			}

			.followed {
				color: #fff;
				background: var(--activeColor);
				border: 1upx solid var(--activeColor);
			}
		}

		.swiper-wrap {
			position: relative;
			image{
				width: 100%;
			}
			
		}

		.content-box {
			font-size:40upx;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:43upx;
		}
		
		.detail-info{
			font-size:28upx;
			font-weight:400;
			color:rgba(128,128,128,1);
			line-height:34upx;
			margin-top: 20upx;
		}
		
		.other-info{
			display: flex;
			justify-content: space-between;
			padding: 20upx 0;
			
			.read-num{
				font-size:24upx;
				font-weight:400;
				color:rgba(128,128,128,1);
				line-height:43upx;
				
				image{
					width: 25upx;
					height: 20upx;
					margin-right: 5upx;
				}
			}
			
			.item-right{
				font-size:24upx;
				font-weight:400;
				color:rgba(128,128,128,1);
				line-height:43upx;
				
				image{
					width: 25upx;
					height: 20upx;
					margin-right: 5upx;
				}
			}
			
			.mate_tags {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #808080;
					
				image {
					width: 14px;
					height: 14px;
					margin-right: 5px;
				}
			}
			
		}
	}
	
	.detail_send {
		background-color: #ffffff;
		// padding: 30upx 30upx 0;
		padding-top: 30upx;
		width: 100%;
		border-top: 10upx solid rgba(250, 250, 250, 1);
	
		.item-head {
			display: flex;
			align-items: center;
			padding: 20upx 40upx;
			width: 100%;
			justify-content: space-between;
			border-bottom: 1upx solid var(--mainColor);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background-color: #fff;
			height: 120upx;
	
			.left-info {
				display: flex;
				align-items: center;
	
				.img-wrap {
					width: 70upx;
					height: 70upx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 20upx;
	
					.avatar {
						font-size: 32upx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						line-height: 43upx;
					}
				}
	
				.head-name {
					padding-left: 40upx;
					color: #666666;
					font-size: 32upx;
				}
			}
	
			.follow-btn {
				width: 140upx;
				height: 60upx;
				border: 1upx solid var(--mainColor);
				color: var(--mainColor);
				border-radius: 40upx;
			}
	
			.followed {
				color: #fff;
				background: var(--activeColor);
				border: 1upx solid var(--activeColor);
			}
		}
	
		.swiper-wrap {
			position: relative;
	
			image {
				width: 100%;
			}
	
		}
	
		
		.detail-info {
			font-size: 28upx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 34upx;
			margin-top: 20upx;
		}
	
		.other-info {
			display: flex;
			justify-content: space-between;
			padding: 20upx 0;
	
			
		}
	
		.comment-wrap {
			background-color: #fff;
			padding-bottom: 150upx;
			
	
			.scroll-wrap {
				height: 100%;
				border-top: 1upx solid var(--mainColor);
			}
	
			.comment-num {
				padding: 15upx 0;
				font-size: 32upx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				line-height: 43upx;
				width: 93%;
				margin: 0 auto;
	
				text {
					float: right;
					font-size: 24upx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					line-height: 43upx;
				}
			}
			.bor{
				width: 100%;
				height: 2px;
				background:rgba(242,242,242,1);
			}
	
			.comment-item {
				// display: flex;
				// justify-content: space-between;
				padding-top: 30upx;
				
				.left-avatar {
					display: flex;
					width: 93%;
					margin: 0 auto;
	
					.avatar {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;
						overflow: hidden;
						border: 1upx solid #ECECEC;
					}
	
					.right-top {
						margin-left: 20upx;
	
						.reply {
							display: flex;
							font-size: 28upx;
						}
	
						.active {
							color: var(--activeColor) !important;
						}
	
						.title {
							font-size: 32upx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							line-height: 56upx;
							
							.picimg{
								width: 56px;
								height: 16px;
								line-height: 16px;
								margin-left: 10px;
								display: inline-block;
							}
							
						}
	
						.time {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 400;
							color: rgba(128, 128, 128, 1);
							line-height: 43upx;
						}
					}
				}
	
				.right-box {
					margin-left: 20upx;
					flex: 1;
	
					.right-mine {
						// padding: 20upx;
						// background-color: #f5f8f9;
						border-radius: 10upx;
						flex: 1;
						padding-left: 92upx;
	
						.other-info {
							justify-content: flex-end;
						}
					}
	
					.content {
						font-size: 32upx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 48upx;
					}
					.contenttime{
						font-size: 24upx;
						font-weight: 500;
						color: rgba(128,128,128,1);
						line-height: 48upx;
					}
				}
			}
		}
	
		.comment-input {
			height: 119upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.35);
	
			.top-input {
				display: flex;
				align-items: center;
				width: 547upx;
				height: 60upx;
				text-indent: 20upx;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(230, 230, 230, 1);
				box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
				border-radius: 30px;
	
			}
	
			input::-webkit-input-placeholder {
				font-size: 28upx;
				font-weight: bold;
				color: rgba(128, 128, 128, 1);
				line-height: 43upx;
			}
	
			.biaoq {
				width: 52upx;
				height: 52upx;
				border-radius: 50%;
				background: url(../../static/img/info_slices/business_college_face.png) no-repeat;
				-webkit-background-size: 100% 100%;
				background-size: 100% 100%;
			}
	
			.send-btn {
				width: 51upx;
				height: 51upx;
				margin-left: 10upx;
				border-radius: 50%;
				background: url(../../static/img/info_slices/business_college_send.png) no-repeat;
				-webkit-background-size: 100% 100%;
				background-size: 100% 100%;
			}
		}
	}
	
</style>
